<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

<div id="app">

    <el-input v-model="query.mname" style="width: 200px;" clearable placeholder="关键字查询"></el-input>


    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="菜单id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="mname"
                label="菜单名称">
        </el-table-column>
        <el-table-column
                prop="url"
                label="菜单路径">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>

            </template>
        </el-table-column>
    </el-table>



    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <el-dialog title="修改菜单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="菜单名称" :label-width="formLabelWidth">
                <el-input v-model="form.mname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="菜单URL" :label-width="formLabelWidth">
                <el-input v-model="form.url" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateUser">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{

            tableData:[],
            total:0,
            query:{
                manme:"",
                page:1,
                pageSize:2
            },


            dialogFormVisible: false,
            form: {
                manme: '',
                url:""
            },
            formLabelWidth: '120px'

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        methods:{
            updateUser(){
                axios.post("/menu/update",this.form).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogFormVisible = false;
                    this.initData();
                })
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                this.form = JSON.parse(JSON.stringify(row));
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/menu/deleteOne?id="+row.id).then(res=>{
                        this.initData();
                        this.$message({
                            type: 'info',
                            message: res.data
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                axios.post(`/menu/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    console.log(res.data)
                    this.tableData = res.data.records;
                    this.total = res.data.total;

                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })

            }

        },
        created(){
            this.initData()
        }
    })
</script>

</body>
</html>